<div class="bjui-pageContent">
    <div class="pageFormContent" data-layout-h="0">
        <div class="bjui-doc">
            <h3 class="page-header">查找带回</h3>
            <blockquote>
                <p>本节主要介绍框架的查找带回功能，流程：1. 打开一个呈现数据的弹出窗口；2. 选择一个或多个值，将值返回到触发页面对应的input；3. 关闭弹出窗口。</p>
            </blockquote>
            <h4>初始化</h4>
            <ul>
                <li>Data属性：input添加属性<code>data-toggle="lookup"</code> 或 点击含有属性<code>data-toggle="lookupbtn"</code>的元素触发。<br>
                    <span class="label label-default">DOM示例1：</span>　<label>PID:</label><input type="text" name="pid" size="5">&nbsp;<label>查找名称：</label><input type="text" data-toggle="lookup" data-url="doc/form/mylookup.html" name="name" size="10"><br>
                    <p>示例代码：</p>
                    <pre class="brush: html">
                        &lt;label>PID:&lt;/label>&lt;input type="text" name="pid" size="5">
                        &lt;label>查找名称：&lt;/label>&lt;input type="text" data-toggle="lookup" data-url="doc/form/mylookup.html" name="name" size="10">
                    </pre>
                    <span class="label label-default">DOM示例2：</span>　<label>PID:</label><input type="text" name="t2.pid" size="5">&nbsp;<label>查找名称：</label><input type="text" name="t2.name" size="10"> <a href="doc/form/mylookup.html" data-toggle="lookupbtn" data-group="t2">打开Lookup窗口</a><br>
                    <p>示例代码：</p>
                    <pre class="brush: html">
                        &lt;label>PID:&lt;/label>&lt;input type="text" name="t2.pid" size="5">
                        &lt;label>查找名称：&lt;/label>&lt;input type="text" name="t2.name" size="10"> &lt;a href="doc/form/mylookup.html" data-toggle="lookupbtn" data-group="t2">打开Lookup窗口&lt;/a>
                    </pre>
                </li>
                <li>jQuery API：<br>
                    <pre class="brush: js">
                        $(input).lookup(options)
                    </pre>
                </li>
            </ul>
            <h4>参数（options）</h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>名称</th>
                        <th>类型</th>
                        <th>默认值</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>url</td>
                        <td>string</td>
                        <td>null</td>
                        <td>[必选] <span class="badge"><i>D-Url</i></span> 打开lookup的URL，a链接触发时可以将url定义在href属性。。</td>
                    </tr>
                    <tr>
                        <td>group</td>
                        <td>string</td>
                        <td>null</td>
                        <td>[可选] input的名称，适用于input名称为"aa.bb"的形式，其中 group为：<code>aa</code>。</td>
                    </tr>
                    <tr>
                        <td>suffix</td>
                        <td>string</td>
                        <td>null</td>
                        <td>[可选] input的名称后缀，适用于input名称为"abcd[]"或"aa.bb[]"的形式，其中 suffix为：<code>[]</code>，<code>特别注意：</code>如果真实情况suffix为"[]"，请写为<code>" []"</code>，空格加"[]"，以防止被转义为空数组。</td>
                    </tr>
                    <tr>
                        <td>id</td>
                        <td>string</td>
                        <td>lookup_dialog</td>
                        <td>[可选] 弹出窗口的id。</td>
                    </tr>
                    <tr>
                        <td>mask</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 是否弹出模态窗口。</td>
                    </tr>
                    <tr>
                        <td>width</td>
                        <td>int</td>
                        <td>600</td>
                        <td>[可选] 弹出窗口的宽度。</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td>int</td>
                        <td>400</td>
                        <td>[可选] 弹出窗口的高度。</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>string</td>
                        <td>Lookup</td>
                        <td>[可选] 弹出窗口的标题，单击触发时，如未明确定义title，将取元素的text值作为title。</td>
                    </tr>
                    <tr>
                        <td>maxable</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 弹出窗口可以最大化。</td>
                    </tr>
                    <tr>
                        <td>resizable</td>
                        <td>boolean</td>
                        <td>true</td>
                        <td>[可选] 弹出窗口可以调整大小。</td>
                    </tr>
                </tbody>
            </table>
            <h4>事件</h4>
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>事件名称</th>
                        <th>中文说明</th>
                        <th>描述</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>afterchange.bjui.lookup</td>
                        <td>带回值后的事件</td>
                        <td>监听该事件，可以在input取得返回值后进行相关操作。</td>
                    </tr>
                </tbody>
            </table>
            <p>这样监听lookup的事件：<code>mylookup - selector</code>表示lookup赋值了的input选择器</p>
            <pre class="brush: js">
                $(document).on('afterchange.bjui.lookup', 'mylookup - selector', function(e, data) {
                    var myvalue = data.value
                    
                    // do something...
                })
            </pre>
            <blockquote class="point">
                <p>如果事件代码写在页片中，为防止页片刷新之类的导致document重复绑定事件，需要在on事件前先调用off方法解除已绑定事件。代码如下：</p>
                <pre class="brush: js">
                $(document)
                    .off('afterchange.bjui.lookup', '.lookup-name')
                    .on('afterchange.bjui.lookup', '.lookup-name', function(e, data) {
                        var myvalue = data.value
                        
                        // do something...
                })
            </pre>
            </blockquote>
        </div>
    </div>
    <div class="bjui-footBar">
        <ul>
            <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
        </ul>
    </div>
</div>